<template>
	<view class="">
		<view class="catalogue">
			<toSafe :bgColor="'#fff'"></toSafe>
			<view class="search-top">
				<view class="icon" @click="HandleReturn">
					<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
				</view>
				<view class="title">目 录</view>
				<button class="top-btn" @click="seeDirectory" v-if="classType">一级目录</button>
			</view>
			<!-- <view class="info-search">
			<view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="keyword" placeholder="搜索公司名称、类型" />
				<view @click="search" class="search">搜索</view>
			</view>
		</view> -->
			<up-loadmore status="loading" v-if="isLoading" />
			<view class="" v-else>
				<scroll-view scroll-y="true" class="catalogue-body" v-if="classType" @scroll="scroll">
					<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
						v-if="dataLists.length == 0">
					</up-empty>
					<view class="_tbody" v-else>
						<view class="body-item" v-for="(item, index) in wbPlanClassifyYearContentVos"
							:key="item.classifyId" @click="radioChange(item,index)">
							<view class="label">
								<text>{{item.classifyName}}</text>
							</view>
							<view class="button">
								<button @click.stop="edit(item)">编辑</button>
							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view scroll-y="true" class="catalogue-body" v-else @scroll="scroll">
					<up-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
						v-if="dataLists.length == 0">
					</up-empty>
					<view class="_tbody" v-else>
						<!-- <up-swipe-action v-for="(item, index) in dataLists" :key="item.classifyId">
					<up-swipe-action-item v-model:show="show" :options="options1">
						<view class="swipe-action up-border-top up-border-bottom">
							<up-radio-group v-model="radiovalue7" placement="column" iconPlacement="right">
								<up-radio labelSize="16px" :label="item.classifyName" :name="item.classifyName"
									class="catalogue-chick" @change="radioChange(item,index)">111
								</up-radio>
							</up-radio-group>
						</view>
					</up-swipe-action-item>
				</up-swipe-action> -->
						<view class="body-item" v-for="(item, index) in dataLists" :key="item.classifyId"
							@click="classChange(item,index)">
							<view class="label">
								<text>{{item.classifyName}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

		</view>
		<view class="body-item fixed" @click="feedback">
			<view class="label">
				<text>反馈填写</text>
			</view>
			<view class="button">
				<!-- @click.stop="edit(item)" -->
				<button>编辑</button>
			</view>
		</view>
		<up-popup :show="popupShow" mode="bottom" @close="close" :customStyle="{height: '50vh'}">
			<view class="popup-top">
				<text @click="close">取消</text>
				<text @click="emitHandler">确认</text>
			</view>
			<up-form :model="form" labelPosition="left" style="padding: 0 30rpx;">
				<up-form-item label="类目名称" prop="classifyName" borderBottom ref="item1">
					<up-input placeholder="请输入类目名称" border="surround" v-model="form.classifyName"></up-input>
				</up-form-item>
				<!-- <up-form-item label="数量" required prop="number" borderBottom ref="item1">
					<up-input placeholder="请输入数量" border="bottom" v-model="form.number"></up-input>
				</up-form-item>
				<up-form-item label="类型" required prop="type" borderBottom ref="item2">
					<up-input placeholder="请输入类型" border="bottom" v-model="form.type"></up-input>
				</up-form-item>
				<up-form-item label="型号" required prop="modelNumber" borderBottom ref="item3">
					<up-input placeholder="请输入型号,多个型号请以逗号隔开" border="bottom" v-model="form.modelNumber"></up-input>
				</up-form-item> -->
				<up-form-item label="备注" prop="remark" ref="item3">
					<up-textarea v-model="form.remark" placeholder="请输入内容" height="300" maxlength="-1"></up-textarea>
				</up-form-item>
			</up-form>
			<!-- <view>
			<up-input placeholder="请输入更换名称" border="surround" v-model="popupValue"></up-input>
		</view> -->
			<!-- <view class="popup-btn">
			<button @click="emit">确认</button>
		</view> -->
		</up-popup>
	</view>
</template>

<script setup>
	import {
		getCatalogueYearList,
		catalogueChange,
		catalogueYearChange
	} from "@/api/maintenance.js"
	import EventBus from '@/utils/eventBus.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import toSafe from '@/compoents/top-safe.vue'
	import {
		ref,
		reactive,
		defineComponent,
		onMounted
	} from 'vue'
	const show = ref(false)
	// 使用 reactive 创建响应式对象  
	let options1 = reactive([{
		text: '编辑'
	}]);
	let dataLists = reactive([])
	const isLoading = ref(false)
	const radiovalue7 = ref(true)
	const itemId = ref()
	const popupShow = ref(false)
	const popupValue = ref('')
	const classifyId = ref('')
	const type = ref('')
	let form = reactive({
		number: '',
		type: '',
		modelNumber: '',
		classifyName: '',
		remark: '',
	})
	const classType = ref(true)
	let wbPlanClassifyYearContentVos = reactive([])
	let rules = ref({})
	const nameValue = ref(1)
	onLoad(option => {
		itemId.value = option.id
		type.value = option.type == '审核' ? true : false
		if (option.nameValue) {
			nameValue.value = option.nameValue
		}
		getList()
	})
	onMounted(() => {})
	const getList = () => {
		isLoading.value = true
		getCatalogueYearList(itemId.value).then(res => {
			if (res.code == 200) {
				dataLists.splice(0, dataLists.length, ...res.rows)
				wbPlanClassifyYearContentVos.splice(0, wbPlanClassifyYearContentVos.length, ...res.rows[
						nameValue.value - 1]
					.wbPlanClassifyYearContentVos)
			}
			isLoading.value = false
		})
	}
	// 二级菜单点击
	const radioChange = (item, index) => {
		// item.index = index
		// item.total = dataLists.length
		// const storageItem = JSON.stringify(item)
		// uni.setStorageSync('form_Item', storageItem)
		uni.redirectTo({
			url: `/pages/tasks/fireYear?id=${item.classifyYearContentId}&itemId=${itemId.value}&name=${item.classifyName}&type=${type.value ? '审核' :''}&nameValue=${nameValue.value}`
		})
	}
	const feedback = () => {
		console.log(wbPlanClassifyYearContentVos, 'dataLists');
		const item = wbPlanClassifyYearContentVos[wbPlanClassifyYearContentVos.length - 1]
		uni.redirectTo({
			url: `/pages/tasks/fireYear?id=${item.classifyYearContentId}&itemId=${itemId.value}&name=${item.classifyName}&type=${type.value ? '审核' :''}&nameValue=${nameValue.value}&indexValue=${dataLists[dataLists.length]}`
		})
	}
	// 一级菜单点击
	const classChange = (item, index) => {
		classType.value = true
		wbPlanClassifyYearContentVos.splice(0, wbPlanClassifyYearContentVos.length, ...item
			.wbPlanClassifyYearContentVos)
		nameValue.value = index + 1
	}
	const edit = (item) => {
		// console.log(22222222222);
		// console.log(item,'items');
		classifyId.value = item.classifyYearContentId
		form.classifyName = item.classifyName
		form.remark = item.remark
		popupShow.value = true
	}
	// 提交表单
	const emit = () => {
		if (!form.classifyName || form.classifyName == '') {
			uni.showToast({
				title: '类目名称不能为空',
				icon: 'none',
			})
			return
		}
		if (!form.number || form.number == '') {
			uni.showToast({
				title: '数量不能为空',
				icon: 'none',
			})
			return
		}
		if (!form.type || form.type == '') {
			uni.showToast({
				title: '类型不能为空',
				icon: 'none',
			})
			return
		}
		if (!form.modelNumber || form.modelNumber == '') {
			uni.showToast({
				title: '型号不能为空',
				icon: 'none',
			})
			return
		}
		let popupForm = {
			id: classifyId.value,
			classifyName: form.classifyName,
			number: form.number,
			type: form.type,
			modelNumber: form.modelNumber
		}
		catalogueChange(popupForm).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '修改成功',
					icon: 'none',
				})
				popupShow.value = false
				// console.log(nameValue.value, 'nameValue.value');
				getList()
			}
		})
		// if (!popupValue.value) {
		// 	uni.showToast({
		// 		title: '请输入内容',
		// 		icon: 'none'
		// 	})
		// 	return
		// } else {

		// }
	}
	const emitHandler = () => {
		let popupForm = {
			classifyYearContentId: classifyId.value,
			classifyName: form.classifyName,
			remark: form.remark
		}
		catalogueYearChange(popupForm).then(res => {
			if (res.code == 200) {
				uni.showToast({
					title: '修改成功',
					icon: 'none',
				})
				form.remark = ""
				popupShow.value = false
				// console.log(nameValue.value, 'nameValue.value');
				getList()
			}
		})
	}
	const HandleReturn = () => {
		uni.navigateBack({
			delta: 1
		});
	}
	const seeDirectory = () => {
		classType.value = false
	}
	const close = () => {
		popupShow.value = false
		Object.assign(form, {
			number: '',
			type: '',
			modelNumber: '',
			classifyName: '111',
			remark: '',
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.catalogue {
		width: 100%;
		height: 100%;
		background-color: #F6F8FA;

		.search-top {
			height: 88rpx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.top-btn {
				position: absolute;
				right: 28rpx;
				width: 160rpx;
				height: 64rpx;
				line-height: 64rpx;
				background-color: #325EF5;
				color: #fff;
				font-size: 24rpx
			}

			.icon {
				width: 10vw;
				height: 88rpx;
				line-height: 88rpx;
				z-index: 1;
			}

			.title {
				width: 90vw;
				line-height: 88rpx;
				height: 88rpx;
				text-align: center;
				margin-left: -8vw;
				font-size: 34rpx;
				font-weight: 700;
			}
		}

		.catalogue-body {
			height: calc(100vh - 88rpx);
			padding: 0 28rpx;
			padding-bottom: 20rpx;

			.catalogue-chick {
				width: 100%;
				height: 84rpx;
				background-color: #fff;
				margin: 0;
				margin-top: 20rpx;
				padding: 20rpx 24rpx;
				border-radius: 12rpx;
			}

			._tbody {
				margin-top: 20rpx;

				.body-item {
					.inline_space_between();
					// height: 88rpx;
					background-color: #fff;
					border-radius: 12rpx;
					padding: 10rpx 20rpx;
					margin-bottom: 20rpx;

					.label {
						overflow: hidden;
					}

					.button {
						button {
							height: 60rpx;
							min-width: 100rpx;
							background-color: #325EF5;
							font-size: 18rpx;
							color: #fff;
							line-height: 60rpx;
							margin-left: 10rpx;
						}

					}
				}
			}
		}

		.info-search {

			.search_icons {
				margin: 20rpx 0;
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

	}

	.fixed {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 25rpx 30rpx;
		box-sizing: border-box;

		.button {
			button {
				height: 60rpx;
				background-color: #325EF5;
				font-size: 18rpx;
				color: #fff;
				line-height: 60rpx;
			}

		}
	}

	::v-deep .icon-add {
		background-color: #c5c6c8;
	}

	::v-deep .is-add {
		background-color: #F6F8FA;
	}

	::v-deep .u-popup__content {
		// width: 80vw;
		// height: 20vh;
		// min-height: 228rpx;
		background-color: #fff;
		// border-radius: 20rpx;
		// padding: 0 30rpx;
		// padding-top: 5vh;
		// .inline_column_space_around();

		.popup-btn {
			button {
				height: 100%;
				width: 40%;
				background-color: #325EF5;
				color: #fff;
			}
		}

		.popup-top {
			.inline_space_between();
			width: 100%;
			// padding: 24rpx;
			height: 80rpx;
			color: #325EF5;
			font-size: 40rpx;
			background-color: #F6F8FA;

			text {
				width: 20%;
				height: 50rpx;
				text-align: center;
			}
		}
	}

	::v-deep .u-form-item__body__left {
		display: block;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;
			height: 80rpx;

			&__text {
				font-size: 15px;
				padding-left: 30rpx;
			}
		}
	}
</style>